<template>
  <div>
    <div class="ej-banner-box">
	<div class="ej_banner">
		<img src="../assets/images/banner-about.jpg" class="banner2">
	</div>
</div>

	<!-- 导航条部分 -->
<div class="clear"></div>
<div class="ejdhnav">

<div class="nav">
    <ul>
        <li v-for="item in navlist" @click="link(item)">
          <img :src="require('../assets/images/'+item.icon)" >
          <span>{{item.title}}</span>
        </li>
    </ul>
 <div class="zhibanbiao2" v-if="isYqlj">
        <ul class="date">
            <div class="date2_li" v-for="item in qyljList" @click="yqlj(item)">
            	<a><i class="iconfont icon-lianjie1"></i>{{item.title}}</a>
            </div>
        </ul>
    </div>
    <!-- 值班表 -->
    <div class="zhibanbiao" v-if="iszhiban">
        <ul class="date">
            <div :class="index == 0?'date_li activezbzb':'date_li'" v-for="(item,index) in zhibanlist">
                 <div class="date_li_top">
                  <p>{{index == 0?'今天':index == 1?'明天':getweek(item.day)}}</p>
                 </div>
                 <div class="date_li_bottom">

                  <p v-for="list in item.data">
                      <span class="likey" v-html="list.key"></span>：<span  class="liname" v-html="list.name"></span>
                   </p>
                 </div>
            </div>



        </ul>
    </div>
    <!-- 搜索框 -->
    <div v-if="isSearch" class="searchPosititon">
        <img class="tr" src="../assets/images/search-tr.png">
        <div class="searchPosititon_input">
            <el-input v-model="searchTitle" placeholder="请输入您要搜索的内容..." class="searchPosititon_inputinput"></el-input>
            <el-button class="searchPosititon_inputbtn" @click="goTo('searchresult',searchTitle)"></el-button>
        </div>
        <el-button class="gjssbtn" @click="goTo('searchresult')">高级搜索</el-button>
    </div>
</div>
</div>
<!-- 手机版导航条垂直下拉 -->
<div class="clear"></div>
<div class="nav-ph">
    <div class="button">
        <button  class="dropbtn">
            <img class="more" src="../assets/images/more.png" @click="dropbtn">
        </button>
        <div class="search1 bar1">
            <form>
              <el-input v-model="searchTitle" placeholder="请输入您要搜索的内容..." class="searchPosititon_inputinput"></el-input>
            <el-button class="searchPosititon_inputbtn" @click="goTo('searchresult',searchTitle)"></el-button>
                <!-- <el-button class="gjssbtn" @click="goTo('searchresult')">高级搜索</el-button> -->
            </form>
        </div>
    </div>
    <div id="myDropdown" class="dropdown-content" v-if="myDropdown">
      <a v-for="item in mnavlist" @click="link(item)">
          <img :src="require('../assets/images/'+item.icon)" >
          <span>{{item.title}}</span>
        </a>
    </div>
</div>

<div class="clear"></div>
  </div>
</template>
<script>
const { body } = document;
const WIDTH = 992;
import { queryCascadePage  } from "@/api/webpage";
import { queryFiveDuty  } from "@/api/webviews";
export default {
  name: "Header",
  props: {

  },
  data() {
    return {
      myDropdown:false,
        navlist:[
            {title:'首页', type:'link', url:'index',icon:'shouye.png'},
            /*{title:'支队概况', type:'linkParams', url:'C0A8B1507E0441F28FA9448DF52AC6DC',navId:10,icon:'zhidui.png'},*/
            {title:'今日值班',type:'click', url:'zhiban',icon:'zhiban.png'},
            {title:'通讯录',type:'linkParams', url:'2293BE31C5B4449FA5487BA2228BA6ED',navId:11,icon:'txl.png'},
            {title:'下载中心',type:'linklistParams', navId:12, url:'10787732C3474762AA46DCDA93F4F038',icon:'xiazai.png'},
            {title:'政策法规',type:'linklistParams', navId:13, url:'10E6E8E122AC493D865969214DA79DD8',icon:'zhengce.png'},
            {title:'在线投稿',type:'openwindow', url: this.requestUrl +'/manager/#/',icon:'zaixian.png'},
            {title:'视频点播',type:'linklistParams', navId:15, url:'1817DA29BBB047B7ADBE6F6D1EC65301',icon:'shipin.png'},
            {title:'历史数据',type:'openwindow', url: 'http://59.198.2.188:8080/',icon:'jiuban.png'},
           /* {title:'友情链接',type:'click', url:'yqlj',icon:'youqing.png'},*/
            {title:'搜索',type:'click', url:'search',icon:'sousuo.png'},
        ],
        mnavlist:[
            {title:'首页', type:'link', url:'index',icon:'shouye.png'},
           /* {title:'支队概况', type:'linkParams', url:'C0A8B1507E0441F28FA9448DF52AC6DC',navId:10,icon:'zhidui.png'},*/
            {title:'今日值班',type:'link', url:'other',icon:'zhiban.png'},
            {title:'通讯录',type:'linkParams', url:'2293BE31C5B4449FA5487BA2228BA6ED',navId:11,icon:'txl.png'},
            {title:'下载中心',type:'linklistParams', navId:12, url:'10787732C3474762AA46DCDA93F4F038',icon:'xiazai.png'},
            {title:'政策法规',type:'linklistParams', navId:13, url:'10E6E8E122AC493D865969214DA79DD8',icon:'zhengce.png'},
            {title:'在线投稿',type:'openwindow', url: this.requestUrl +'/manager/#/',icon:'zaixian.png'},
            {title:'视频点播',type:'linklistParams', navId:15, url:'1817DA29BBB047B7ADBE6F6D1EC65301',icon:'shipin.png'},
             {title:'历史数据',type:'openwindow', url:'http://59.198.2.188:8080/',icon:'jiuban.png'},
            /*{title:'友情链接',type:'link', url:'yqlj',icon:'youqing.png'},*/
        ],
        isSearch:false,
        searchTitle:'', //搜索标题
        isYqlj:false,
        qyljList:[],
        iszhiban:false,
        zhibanlist:[]
    };
  },
  created(){
    this.get()
  },
  methods: {
    dropbtn(){
      this.myDropdown = true
    },
    getweek(date){
      let myDate = new Date(date)
      let wk = myDate.getDay()
      let arra = date.split("-")
      let font = wk==1?'星期一':wk==2?'星期二':wk==3?'星期三':wk==4?'星期四':wk==5?'星期五':wk==6?'星期六':'星期日'
      return  arra[1]+'月'+arra[2]+'日 '+ font
    },
    get(){
      queryFiveDuty().then(res=>{
        if(res.code == 0){
          this.zhibanlist = res.data.map(item=>{
            item.data.map((list,i)=>{
              if(list.key == '带班领导' && !list.name){
                item.data.splice(i,1)
              }
              // else if(list.key == '值班领导' && !list.name){
              //   item.data.splice(i,1)
              // }
            })
            return item
          })

          // 处理一下数据 key的三个字 改变为4个字  name的2个字改成三个字
          for(let i=0;i<this.zhibanlist.length;i++){
            let data = this.zhibanlist[i].data;
            // console.log("---值班数据集合是：",data);
            for(let j=0;j<data.length;j++){
              let it = data[j];
              // console.log("值班数据是",it);
              let key = it.key;
              let name = it.name;
              // console.log("处理结果：",key.length,name.length)
              let keyArr = key.split("");
              let newKeyArr = []
              let nameArr = name.split("");
              let newNameArr = []
              if(keyArr.length==3){ // 变成4
                for(let k=0;k<keyArr.length;k++){
                  // console.log("key的值是",keyArr[k]);
                  newKeyArr.push(keyArr[k]);
                  if(k==0 || k==1){
                    newKeyArr.push("&nbsp;");
                  }
                }
                // console.log("组装的集合是：",newKeyArr.join(""));
                // 重置key
                it.key = newKeyArr.join("");
              }

              if(nameArr.length==2){ // 2变成3
                for(let k=0;k<nameArr.length;k++){
                  // console.log("name的值是",nameArr[k]);
                  newNameArr.push(nameArr[k]);
                  if(k==0){
                    newNameArr.push(" &nbsp;&nbsp;");
                  }
                }
                // console.log("组装的集合是：",newNameArr.join(""));
                // 重置key
                it.name = newNameArr.join("");
              }
            }
          }
          // console.log("排班内容为：",this.zhibanlist);


        }
      })
    },
    getyqlj(id){
        queryCascadePage({columnId:id,pageNum:1,pageSize:100}).then(res=>{
            if(res.code == 0){
                this.qyljList = res.rows
            }
        })
    },
    yqlj(item){
      window.open(item.no,"_blank")
    },
    link(row){
     if(row.type == 'link'){
       this.$router.push({name: row.url})
       /*let routeData = this.$router.resolve({
         name: row.url
       })
       window.open(routeData.href, '_blank')*/

      }else if(row.type == "click"){
        if(row.url == 'search'){
                this.isYqlj = false
                this.iszhiban = false
                this.isSearch = !this.isSearch
            }else if(row.url == 'yqlj'){
                this.isSearch = false
                this.iszhiban = false
                this.isYqlj = !this.isYqlj
                this.getyqlj('16D0E38381094EF29885ACA54294F88D')
            }else if( row.url == "zhiban"){
              this.get()
              this.iszhiban = !this.iszhiban
              this.isSearch = false
              this.isYqlj = false
            }else{
                this.$message.warning("抱歉，正在开发中")
            }
      }else if(row.type == 'linkParams'){
        this.isYqlj = false
        this.iszhiban = false
        this.isYqlj = false
        /*this.$router.push({
            name: 'articlecontent',
            query:{ id:row.url,navId:row.navId}
        })*/
       let routeData = this.$router.resolve({
           name: 'articlecontent',
           query:{ id:row.url,navId:row.navId}
       })
       window.open(routeData.href, '_blank')

      }else if(row.type == 'linklistParams'){
        this.isYqlj = false
        this.iszhiban = false
        this.isYqlj = false
        /*this.$router.push({
            name: 'articlelistpage',
            query:{navId:row.navId,id:row.url}
        })*/

       let routeData = this.$router.resolve({
         name: 'articlelistpage',
         query:{navId:row.navId,id:row.url}
       })
       window.open(routeData.href, '_blank')
      }else if(row.type == 'openwindow'){
        window.open(row.url,"_blank")
      }
      this.myDropdown = false
    },
    goTo(url,title){
        /*this.$router.push({
            name: url,
            query:{title:title}
        })*/
      let routeData = this.$router.resolve({
        name: url,
        query:{title:title}
      })
      window.open(routeData.href, '_blank')
    }
  },
};
</script>
<style scoped>
@import "../assets/css/font/iconfont.css";
@import "../assets/css/index.css";
@import "../assets/css/style.css";
</style>
<style>
    .searchPosititon_inputinput.el-input .el-input__inner{
        height: 45px;
    }
</style>
